<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>反抄袭联盟</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
        font-family: 微软雅黑;
    }

    body, html {
        width: 100%;
        height: 100%;
        background-color: #f4f5f5;
    }

    .info {
        width: 1000px;
        margin: 0 auto;
    }

    .info ul li {
        list-style: none;
        margin-bottom: 15px;
    }

    .info .info_creation {
        height: 140px;
        background-color: #FFFFFF;
        padding: 22px;
        margin-bottom: 15px;
    }

    .info .info_creation .left {
        width: 700px;
        float: left;
    }


    .info .info_creation .right {
        height: 100%;
        float: left;
    }

    .info .info_creation .dirty {
        width: 100%;
        height: 30px;
    }

    .info .info_creation .dirty .dirty_label {
        width: 50px;
        text-align: center;
        height: 22px;
        background-color: #fcc797;
        color: #aa5f08;
        line-height: 22px;
        border-radius: 5px;
        font-size: 12px;
        float: left;
    }

    .info .info_creation .dirty .dirty_name {
        float: left;
        margin-left: 12px;
    }

    .info .info_creation .pure {
        width: 100%;
        height: 30px;
        margin-top: 30px;
    }

    .info .info_creation .pure .pure_label {
        width: 50px;
        text-align: center;
        height: 22px;
        background-color: rgba(227, 62, 51, .1);
        color: #e33e33;
        line-height: 22px;
        border-radius: 5px;
        font-size: 12px;
        float: left;
    }

    .info .info_creation  .pure_name {
        float: left;
        margin-left: 12px;
    }

    a {
        text-decoration: none;
    }

    .right p{
        line-height: 30px;
    }

    .href {
        color: #23bccb;
    }

    .nav{
        width: 100%;
        height: 100px;
        background-color: #f4f5f5;
        margin: 0 auto;
    }

    .nav p{
        width: 100%;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
    }

</style>

<body>

<div class="nav">
    <p>反抄袭联盟，拒绝抄袭</p>
</div>

<div class="info" id="info">
</div>

<script>

    let info = document.getElementById('info');

    const httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
    httpRequest.open('GET', 'http://code10000.com/data.json', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
    httpRequest.send();//第三步：发送请求  将请求参数写在URL中
    /**
     * 获取数据后的处理程序
     */
    let string = "";

    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            const json = httpRequest.responseText;
            const jsonObject = JSON.parse(json);

            for (let i = 0; i < jsonObject.length; i++) {

                const objectTemp = jsonObject[i]

                string += " <div class=\"info_creation\">\n" +
                    "        <div class=\"left\">\n" +
                    "            <div class=\"dirty\">\n" +
                    "                <div class=\"dirty_label\">抄袭</div>\n" +
                    "                <p class=\"dirty_name\">" + objectTemp.copiedBySite + "</p>\n" +
                    "            </div>\n" +
                    "            <a href=\"" + objectTemp.dirtyLink + "\" target=\"_blank\"><span class=\"href\">" + objectTemp.dirtyLink + "</span></a>\n" +
                    "\n" +
                    "            <div class=\"pure\">\n" +
                    "                <div class=\"pure_label\">原创</div>\n" +
                    "                <p class=\"pure_name\">" + objectTemp.articleTitle + "</p>\n" +
                    "            </div>\n" +
                    "            <a href=\"" + objectTemp.originalLink + "\" target=\"_blank\"><span class=\"href\">" + objectTemp.originalLink + "</span></a>\n" +
                    "        </div>\n" +
                    "\n" +
                    "        <div class=\"right\">\n" +
                    "            <p>抄袭者：" + objectTemp.plagiarist + "</p>\n" +
                    "            <p>日期：" + objectTemp.publishDate + "</p>\n" +
                    "        </div>\n" +
                    "    </div>"
            }

            info.innerHTML = string

        }
    };

    function getInfo() {

    }
</script>

</body>
</html>